// App.vue是整个应用的根组件
<template>
    <div id="app">
        <h3>欢迎光临vue开发的收银系统_水果店</h3>
        <table>
            <tr>
                <td>苹果{{apple}}$/斤,折扣《{{discount * 10}}折》 </td>
            </tr>
            <tr>
                <td>
                    请输入你要购买的斤数
                    <input type="text" placeholder="请输入斤数" v-model="num">
                </td>
            </tr>
            <tr>
                <td>
                    <button @click="checkOut">结账买单</button>
                </td>
            </tr>
            <tr>
                <td>
                    结账单:
                    总价: <span>{{zj}}$元</span>
                    折后价: <span>{{zhj}}$元</span>
                    省了: <span>{{sl}}$元</span>
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                apple:10,//单价
                discount:0.8, //打折
                num:0,//斤数
                zj:0,//总价
                zhj:0,//打折后
                sl:0,//省了
            }
        },
        methods: {
            checkOut(){
                // 计算
                this.zj = this.apple * this.num //总价
                this.zhj = this.zj * this.discount //折后价
                this.sl = this.zj - this.zhj
            }
        }
    }
</script>

<style>
    #app {
    width: 600px;
    margin: 10px auto;
    }
    table{
        width: 600px;
        border: 1px solid #333;
    }
    table tr td{
        border: 1px solid #333;
    }
</style>